<template>
	<view class="beijing1">
		<view class="" style="position: fixed; top: 0; z-index: 0">
			<image src="/static/beitu.png" mode="" style="width: 100vw; height: 100vh"></image>
		</view>
		<view class="" style="position: fixed; bottom: 0; right: 0; z-index: 0">
			<image src="/static/zhang.png" mode="" style="width: 374rpx; height: 640rpx"></image>
		</view>
		<u-navbar :placeholder="true" title="我的优惠券" @rightClick="rightClick" :autoBack="true" bg-color="transparent"></u-navbar>
		<view class="beijing">
			<u-tabs
				lineColor="#FF0300"
				:list="list1"
				@click="click1"
				:scrollable="false"
				:activeStyle="{ color: '#222222', fontSize: '30rpx' }"
				:inactiveStyle="{ color: '#888888', fontSize: '30rpx' }"
				:current="current"
			></u-tabs>
			<view class="" style="position: relative; z-index: 1">
				<u-empty mode="data" icon="/static/wu.png" text="暂无优惠券、起购" v-if="wu" textColor="#888888"></u-empty>
			</view>
			<view class="" style="xun" v-for="(item, index) in list" :key="index">
				<view class="" style="position: relative; margin-top: 20rpx">
					<view class="" v-if="current == 0">
						<image src="/pagesA/static/wei.png" mode="" style="width: 100%; height: 182rpx" v-if="item.status == 1"></image>
						<image src="/pagesA/static/yi.png" mode="" style="width: 100%; height: 182rpx" v-else></image>
					</view>
					<image v-if="current == 1" src="/pagesA/static/wei.png" mode="" style="width: 100%; height: 182rpx"></image>
					<view class="" style="position: absolute; top: 50%; transform: translateY(-50%); right: 95rpx">
						<image src="/pagesA/static/yishi.png" style="width: 100rpx; height: 87rpx" v-if="item.status == 2"></image>
					</view>
					<view class="" style="position: absolute; top: 50%; transform: translateY(-50%); right: 95rpx; z-index: 1" v-if="current == 1" @click="li(item.id)">
						<view class="center column" style="width: 100rpx; height: 100rpx; background: linear-gradient(0deg, #ffd5cd 1%, #fff7ed 100%); border-radius: 50%">
							<text style="font-weight: 400; font-size: 30rpx; color: #8c1608">立即</text>
							<text style="font-weight: 400; font-size: 30rpx; color: #8c1608">领取</text>
						</view>
					</view>
					<view class="" style="position: absolute; top: 0; width: 100%; height: 182rpx; display: flex; align-items: center">
						<view class="" style="padding: 0 95rpx; margin-top: -20rpx">
							<view class="flex1">
								<view class="column">
									<view class="">
										<text style="font-size: 30rpx; color: #ffffff">￥</text>
										<text style="font-size: 72rpx; color: #ffffff">{{ Math.trunc(item.money) }}</text>
									</view>
									<view class="" style="font-weight: 400; font-size: 22rpx; color: #ffffff; margin-left: 10rpx">满¥{{ Math.trunc(item.min) }}可用</view>
								</view>
								<view class="" style="width: 1rpx; height: 110rpx; background: #e5e5e5; margin: 10rpx 20rpx 0"></view>
								<view class="column between1">
									<text style="font-weight: 400; font-size: 30rpx; color: #ffffff">{{ item.title }}</text>
									<text style="font-weight: 400; font-size: 24rpx; color: #ffffff">{{ item.content }}</text>
									<text style="font-weight: 400; font-size: 24rpx; color: #ffffff">使用有效期:{{ item.is_end == 2 ? '永久有效' : item.end_time }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 110rpx"></view>
		<view class="" style="position: fixed; bottom: 0; width: 100%" v-if="current == 0">
			<view class="" style="padding: 0 25rpx" @click="tiyou">
				<view class="center" style="height: 90rpx; background: #8c1608; border-radius: 40rpx">
					<view class="" style="font-weight: 400; font-size: 30rpx; color: #ffffff">添加优惠卷</view>
				</view>
			</view>
			<view class="" style="height: env(safe-area-inset-bottom)"></view>
		</view>
		<view class="" style="position: fixed; bottom: 0; width: 100%" v-if="current == 1">
			<view class="" style="padding: 0 25rpx" @click="yili">
				<view class="center" style="height: 90rpx; background: #8c1608; border-radius: 40rpx">
					<view class="" style="font-weight: 400; font-size: 30rpx; color: #ffffff">一键领取优惠券</view>
				</view>
			</view>
			<view class="" style="height: env(safe-area-inset-bottom)"></view>
		</view>
	</view>
</template>

<script>
import { coupongetList, coupongetMyCoupon, coupongetCoupon } from '../../untils/api.js';
export default {
	data() {
		return {
			list1: [
				{
					name: '已领取优惠券'
				},
				{
					name: '待领取优惠券'
				}
			],
			current: 0,
			wu: false,
			list: [],
			page: 1
		};
	},
	onReachBottom() {
		this.page++;
		this.wuganw();
	},
	onLoad(ops) {},
	onShow() {
		this.page = 1;
		this.list = [];
		this.q();
	},
	methods: {
		async li(id) {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			const data = await coupongetCoupon({
				coupon_id: id
			});
			if (data.code == 1) {
				uni.showToast({
					icon: 'none',
					title: '领取成功',
					duration: 2000
				});
				this.q();
			}
		},

		async yili() {
			if (this.list.length <= 0) {
				uni.showToast({
					icon: 'none',
					title: '暂无可领取优惠卷',
					duration: 2000
				});
				return;
			}
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			for (let i = 0; i <= this.list.length - 1; i++) {
				await coupongetCoupon({
					coupon_id: this.list[i].id
				});
			}

			this.q();
		},

		async wuganw() {
			const data = await coupongetMyCoupon({
				page: this.page
			});
			this.list = [...this.list, ...data.data.data];
			if (this.list.length > 0) {
				this.wu = false;
			} else {
				this.wu = true;
			}
		},
		async wuganl() {
			const data = await coupongetList();
			this.list = data.data;
			if (data.data.length > 0) {
				this.wu = false;
			} else {
				this.wu = true;
			}
		},
		async q() {
			switch (this.current) {
				case 0:
					this.wuganw();
					break;
				case 1:
					this.wuganl();
					break;
				default:
					break;
			}
		},
		tiyou() {
			uni.navigateTo({
				url: '/pagesA/tianjiayouhuijvan/tianjiayouhuijvan'
			});
		},
		click1(e) {
			this.current = e.index;
			this.page = 1;
			this.list = [];
			this.q();
		},
		rightClick() {
			console.log('rightClick');
		},
		leftClick() {
			console.log('leftClick');
		},
		scrolltolower() {
			console.log('到底了');
		}
	}
};
</script>

<style lang="scss" scoped>
.sl1 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 1;
}
.sl2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 2;
}
.beijing {
	overflow: hidden;
	padding: 0 25rpx;
}
.beijing1 {
	min-height: 100vh;
	background-color: #f0e8dc;
	//系统tabbar不要加注释掉
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: border-box;
}
</style>
